<template>
	<view class="order-box">
		<view class="order">
			<view class="order-cate">
				<view class="order-title">
					{{isRefund ? '退款信息' : shopName}}
				</view>
			</view>
			<view class="item-box" v-for="(item, index) in goodsInfo" :key="item.id" @click="toDetail(item.goods_id)">
				<view class="item">
					<view class="pic">
						<image :src="item.goods_thumbnail" mode="aspectFill"></image>
					</view>
					<view class="order-content">
						<view class="order-goods flex">
							<view class="order-goods-con">
								<view class="good-name">{{item.goods_title}}</view>
								<view class="good-sku-name">{{item.sku_name}}</view>
							</view>
							<view v-if="shouldShowRefundButton(item)" class="good-refund" @click.stop="showRefund">退款</view>
						</view>
						
						<view class="good-foot">
							<view class="flex-center">
								<goods-price :price="isRefund ? item.goods_price : item.price"></goods-price>
								<!-- <view class="good-return" v-if="!isRefund">可免单¥{{(item.goods_back_self_amount / 100).toFixed(2)}}</view> -->
							</view>
							<view class="good-number">x{{item.qty}}{{item.refund_qty>0? ` (退货 x${item.refund_qty})` : ""}}</view>
						</view>
					</view>
				</view>
			</view>
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'pay-goods',
		props: {
			goodsInfo: {
				type: Array,
				default: [],
			},
			refunds: {
				type: Array,
				default: [],
			},
			isRefund: { // 是否展示退款
				type: Boolean,
				dafault: false
			},
			isLeader: {
				type: Boolean,
				dafault: false
			},
			shopName: {
				type: String,
				default: ''
			},
			status: { // 是否展示退款
				type: Number,
				dafault: 1
			},
			orderId: {
				type: Number,
				dafault: 0
			}
		},
		data () {
			return {
				
			}
		},
		methods: {
			showRefund() {
				uni.navigateTo({
					url: '/pages/order/refund?id=' + this.orderId
				})
			},
			// 获取订单商品正在等待退款的数量
			shouldShowRefundButton(item) {
				if (this.status != 2 && this.status != 3) return false;
				let refundingCount = 0
				console.log(this.refunds, "refunds")
				this.refunds.forEach((r) => {
					if (r.status > 0 && r.status < 4) {
						r.items.forEach((itm) => {
							if (itm.item_id == item.id) {
								refundingCount += itm.qty
							}
						})
					}
				})
				console.log(refundingCount)
				return item.qty - item.refund_qty - refundingCount > 0
			},
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/goodsDetail/index?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flex-center {
		display: flex;
		align-items: center;
	}
	.order {
		width: 100%;
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 32rpx 22rpx;
		box-sizing: border-box;
		margin-bottom: 24rpx;
		.order-cate {
			display: flex;
			align-items: center;
			.order-title {
				color: #2E2E2E;
				font-size: 28rpx;
				line-height: 44rpx;
			}
		}
		.uni-swipe {
			width: 100%;
			height: 180rpx;
			margin-bottom: 32rpx;
		}
		.item-box {
			height: 180rpx;
			margin-top: 32rpx;
		}
		.item {
			display: flex;
			width: 100%;
			height: 180rpx;
			
			.pic {
				margin-right: 20rpx;
				image {
					width: 225rpx;
					height: 180rpx;
					border-radius: 16rpx;
				}
			}
			.order-content {
				// width: 390rpx;
				flex: 1;
				overflow: auto;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.order-goods {
					display: flex;
					align-items: center;
					justify-content: space-between;
					.order-goods-con {
						flex: 1;
						overflow: auto;
					}
				}
				.good-name {
					flex: 1;
					height: 64rpx;
					color: #000;
					font-size: 24rpx;
					line-height: 32rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical 
				}
				.good-sku-name {
					height: 40rpx;
					color: #969799;
					font-size: 24rpx;
					line-height: 40rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.good-refund {
					width: 120rpx;
					height: 56rpx;
					color: #979797;
					font-size: 24rpx;
					font-weight: normal;
					line-height: 52rpx;
					text-align: center;
					box-sizing: border-box;
					border: 2rpx solid #E4E4E4;
					border-radius: 28rpx;
				}
				.good-return {
					padding: 0 8rpx;
					box-sizing: border-box;
					background: rgba(252, 73, 81, 0.1);
					font-size: 24rpx;
					font-weight: normal;
					line-height: 36rpx;
					height: 36rpx;
					color: #FC4951;
					border-radius: 4rpx;
					display: inline-block;
					margin-left: 10rpx;
				}
				.good-foot {
					 display: flex;
					 justify-content: space-between;
					 align-items: center;
					 .good-price {
						 color: #FC4951;
						 font-weight: bold;
						 font-weight: 24rpx;
					 }
					 .good-number {
						 color: #2E2E2E;
						 font-size: 24rpx;
						 line-height: 32rpx;
					 }
				 }
	
				.delivery-time {
					color: #e5d001;
					font-size: 24rpx;
				}
			}
		}
	}
	.balance {
		width: 100%;
		background-color: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		height: 300rpx;
		position: absolute;
		bottom: -100rpx;
		left: 0;
		z-index: 99;
		padding: 40rpx 40rpx;
		box-sizing: border-box;
		overflow: hidden;
		.balance-item {
			height: 72rpx;
		}
		.txt {
			color: #2e2e2e;
			font-size: 28rpx;
			height: 72rpx;
			line-height: 72rpx;
		}
		.select {
			width: 40rpx;
			height: 40rpx;
		}
		.check-icon {
			width: 40rpx;
			height: 40rpx;
		}
		.balance-btn {
			height: 72rpx;
			width: 100%;
			line-height: 72rpx;
			box-sizing: border-box;
			border-radius: 36rpx;
			background: linear-gradient(113deg, #FADF5D 18%, #F7D35D 81%);
			text-align: center;
			color: #30240A;
			font-size: 28rpx;
			margin-top: 30rpx;
		}
	}
</style>